<!DOCTYPE html>
<html>
  <head>
    <title>WMS basic mmap - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script>

    <style>
      #map {
          width: 600px;
          height: 400px;
          background-color:#badbff
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script type="text/javascript">
      var map = L.map('map', {
        center: [45.4, 12.5],
        zoom: 4
      });
      
      var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/Packt/wms?', {
        layers: 'Packt:ne_50m_admin_0_countries',
        format: 'image/png',
        transparent: true
      }).addTo(map);
      
      var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/Packt/wms?', {
        layers: 'Packt:ne_50m_rivers_lake_centerlines',
        format: 'image/png',
        transparent: true
      }).addTo(map);

      var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/Packt/wms?', {
        layers: 'Packt:ne_50m_populated_places',
        format: 'image/png',
        transparent: true
      }).addTo(map);
    </script>
  </body>
</html>
